<template>
<div class="dashboard-container" >
    <div class="app-container">
       <el-card shadow="never" >
        <!-- 搜索 -->
        <el-form :model="form" :inline="true" class="demo-form-inline">
          <div class="filter-container"  style='display:flex;justify-content: space-between;'>
          <el-form-item :label="$t('table.keyword')" prop="keyword">
              <el-input @keyup.enter="search" placeholder="根据题目编号搜索" v-model="form.keyword"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button size="small" @click="clearFont">{{$t("table.eliminate")}}</el-button>
              <el-button :loading="isLoading" type="primary" size="small" @click="search">{{$t('table.search')}}</el-button>
          </el-form-item>
          </div>
        </el-form>

        <!-- 数据记录 -->
        <el-alert :title="totalCounts" type="info" show-icon></el-alert>

        <!-- 数据列表 -->
        <el-table :data="tableData" v-loading="isLoading" :header-cell-style="tableHeaderBottomColorFn"
        style="width=100%;margin-top:10px">
        <el-table-column :label="$t('table.serial')" width="200" type="string" :index="indexMethod">
          <template #default="{row}">
              <span>{{row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column  :label="$t('table.questionType')" type="string" width="70">
          <template #default="{row}">
           <span>{{formatQuestionType(row.questionType) }}</span>
            </template>
        </el-table-column>
        <el-table-column  :label="$t('table.Titlenumber')" width="230">
          <template #default="{row}">
            <span>{{row.number}}</span>
            <a
              v-for="item in row.questionIDs"
              :key="item.number"
              style="color:#0099FF"
              type="primary"
              size="mini"
              @click="topicQuestion(item)">
            {{item.number}}
            </a>
            </template>
        </el-table-column>
        <el-table-column :label="$t('table.EntryTime')" >
          <template  #default="{row}">
          <span>{{time(row.addTime) }}</span>
          </template>
          </el-table-column>
        <el-table-column :label="$t('table.Answertime')" >
          <template  #default="{row}">
            <span>{{row.totalSeconds}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.accuracy')">
          <template  #default="{row}">
            <span>{{row.accuracyRate }}</span>
            </template>
        </el-table-column>
        <el-table-column :label="$t('table.EnteredBy')">
          <template  #default="{row}">
            <span>{{row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.operation')">
          <template  #default="{row}">
            <el-button
            type="danger"
            title="删除"
            @click="DELETE(row.id)"
            plain
            icon="el-icon-delete"
            circle
            class="handleButtonHover"></el-button>
          </template>
        </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div style="float:right;padding:10px">
         <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[5,10,20, 50]"
              :total="counts"
              :current-page="form.page"
              :page-size="form.pagesize"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
        </div>
      </el-card>
      <!-- 引用 -->
      <questions-Topic
        :showTopicDialog.sync="showTopicDialog"
        :topicData="topicData"
      ></questions-Topic>
    </div>
  </div>
</template>

<script>

import questionsTopic from '@/module-hmmm/components/questions-topic.vue'
import { randoms as getQuestionsApi, removeRandoms, detail } from '@/api/hmmm/questions'
import { parseTime } from '@/utils/index'
import { questionType } from '@/api/hmmm/constants'
export default {
  name: 'QuestionsRandoms',
  components: {
    questionsTopic

  },
  data () {
    return {
      tableData: [], // 文章数据
      counts: 0, // 总记录数
      form: {
        page: 1, // 页码
        pagesize: 10, // 页容量
        keyword: '', // 关键字
        state: '' // 状态
      },
      isLoading: false,
      showTopicDialog: false,
      topicData: {},
      questionIDsList: []
    }
  },
  computed: {
    totalCounts () {
      return `共${this.counts}条记录`
    }
  },
  created () {
    this.getQuestionsApi()
  },
  methods: {
    tableHeaderBottomColorFn () {
      return {
        'background-color': 'rgb(250, 250, 250)',
        'border-bottom': '2px solid #ccc'
      }
    },
    // 查看
    async topicQuestion (val) {
      try {
        // console.log(questionIDs)
        this.showTopicDialog = true
        // console.log(val.id)
        const { data } = await detail({ id: val.id })
        // console.log(data)
        this.topicData = data
      } catch {
        this.topicData = {}
        this.$message.warning('数据不正确')
      }
    },
    // 删除

    DELETE (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示')
        .then(async () => {
          // 不在第一页，并且当前数据剩下一条
          if (this.page > 1 && this.tableData.length === 1) {
            this.page--
          }
          await removeRandoms({ id: id })
          this.$message.success('删除成功')
          this.getQuestionsApi()
        })
        .catch(() => {

        })
    },
    // 题型处理
    formatQuestionType (rowVal) {
      const typeObj = questionType.find(item => item.value === rowVal)
      return typeObj?.label ? typeObj?.label : '未知'
    },
    // 页容量变化
    handleSizeChange (val) {
      this.form.pagesize = val
      this.form.page = 1
      this.getQuestionsApi()
    },
    // 页码变化
    handleCurrentChange (val) {
      this.form.page = val
      this.getQuestionsApi()
    },
    // 索引调整
    indexMethod (index) {
      return (this.form.page - 1) * this.form.pagesize + index + 1
    },
    // 清除
    clearFont () {
      this.form.keyword = ''
      this.form.state = ''
      this.getQuestionsApi()
    },
    // 搜索
    search () {
      // 重制页码
      this.form.page = 1
      // 重发请求
      this.getQuestionsApi()
    },
    // 处理时间
    time (data) {
      return parseTime(data)
    },
    // 创建参数
    buildParams () {
      const paramsObj = {}
      const { keyword, state, page, pagesize } = this.form
      paramsObj.keyword = keyword || null
      paramsObj.state = state === '' ? null : state
      paramsObj.page = page || null
      paramsObj.pagesize = pagesize || null
      return paramsObj
    },
    // 获取列表
    async getQuestionsApi () {
      this.isLoading = true
      // 构建查询参数
      const paramsObj = this.buildParams()
      try {
        const { data } = await getQuestionsApi(paramsObj)
        // console.log(data)
        this.tableData = data.items
        this.counts = data.counts
        this.isLoading = false
      } catch (err) {
        // console.log(err)
        this.isLoading = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.is-never-shadow {
  padding: 5px 0px 20px 0px;

}
a{
  display: block;
}
a:hover{
  color: skyblue !important;
}
</style>
